<template>
  <div class="tabbar-item" @click="tabClick">
    <div>
      <slot name="item-img" v-if="!isActive"></slot>
      <slot name="item-img-active" v-else></slot>
    </div>
    <div :style="activeStyle">
      <slot name="item-text"></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    path: {
      type: String
    },
    activeColor:{
        type:String,
        default:'#a7d1c7'
    }
  },
  computed: {
     isActive(){
         return this.$route.path.indexOf(this.path) !=-1
     },
     activeStyle(){
         return this.isActive ? {color:this.activeColor} : {}
     }
  },
  methods: {
    tabClick() {
       this.$router.replace(this.path) 
    }
  }
};
</script>
<style lang="less" scope>
.tabbar-item {
  img {
    display: block;
    margin: 3px auto;
    width: 23px;
    height: 23px;
  }
  vertical-align: middle;
  .item-text {
    text-align: center;
    font-size: 12px;
  }
}
</style>
